<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地音频播放器</title>
    <style>
        body {
            text-align: center;
            padding: 50px;
            background-color: aqua;
        }

        .player-container {
            display: inline-block;
            text-align: center;
            background-color: rgb(215, 245, 250);
            border-radius: 10px;
        }
        
        .player-container-night {
            display: inline-block;
            text-align: center;
            background-color: rgb(71, 113, 121);
            border-radius: 10px;
        }

        audio {
            width: 100%;
            background-color: rgb(106, 234, 191);
            border-radius: 10px ;
        }
        .audio-night {
            width: 100%;
            background-color: rgb(40, 76, 64);
            border-radius: 10px;
        }

        .audio-player {
            width: 300px;
            text-align: center;
            padding: 20px;
            ;
        }
        input {  
            border: 0px;
            background-color: rgb(213, 243, 124); 
        }
        

        .controls {
            margin-top: 20px;
        }
        .daytime {
            text-align: center;
            padding: 50px;
            background-color: aqua;
        }

        .night {
            text-align: center;
            padding: 50px;
            background-color: rgb(24, 42, 42);
        }
       
    </style>
</head>
<body>
    <div class="player-container">
        <h1>本地音频播放器</h1>
        <input type="button" class="style" value="白天/黑夜" onclick="func()">
        <div class="audio-player">
            <input type="file" id="file-input" accept="audio/*">

            <p></p>
            <!-- 音频播放器 -->
            <audio id="audio-player" controls>
                <p>您的浏览器不支持音频播放。</p>
            </audio>
            <p>请选择一个音频文件来播放</p>
        </div>
        

    </div>

    <script>
        let style=document.querySelector(".style"); 
        // 获取文件输入和音频元素
        const fileInput = document.getElementById('file-input');
        const audioPlayer = document.getElementById('audio-player');
        let body=document.querySelector("body");
        let audio=document.querySelector("audio");
        let player=document.querySelector(".player-container");
        function func() {
            if(style.value=="白天/黑夜") {
                body.className="night";
                style.value="黑夜/白天"
                audio.className="audio-night"
                player.className="player-container-night"

            }else {
                body.className="daytime"
                style.value="白天/黑夜"
                audio.classList="audio"
                player.className="player-container"

            }
        
        }
        


        // 监听文件输入变化
        fileInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const objectURL = URL.createObjectURL(file);
                audioPlayer.src = objectURL;  // 设置音频播放器的源
                audioPlayer.play();           // 播放音频
            }
        });
    </script>
</body>
</html>
